<template>
  <div class="full-width">
    <div id="header" class="pb-25 pt-36 width-130 mx-auto">
      <p class="text-black-light2 text-40 font-weight-bold">{{state.detail.title}}</p>
      <p v-html="state.detail.desc" class="titleDesc"></p>
    </div>
    <div class="width-130 mx-auto pb-30">
      <p class="text-orange text-40 font-weight-bold">{{state.detail.architectureTitle}}<br/>-</p>
      <p class="my-10 text-18">{{state.detail.architectureDesc}}</p>
      <div
        :style="{'background-image': 'url(' + state.detail.architectureImg + ')','background-repeat':'no-repeat','background-size':'cover'}"
        class="w-100 height-99 border border-border-dotted"
      ></div>
    </div>
    <div class="bg-gray-light3 min-width-130 py-20">
      <div class="width-130 mx-auto">
        <p class="text-orange text-40 font-weight-bold">{{state.detail.serviceFeaturesTitle}}</p>
        <p class="my-8 text-22 text-black-light2">{{state.detail.serviceFeaturesDesc}}</p>
      </div>
      <div class="width-130 mx-auto d-flex flex-wrap mt-10">
        <div v-html="state.detail.productFeaturesContent1" class="feature width-40 flex-column py-13 mx-3"></div>
        <div v-html="state.detail.productFeaturesContent2" class="feature width-40 flex-column py-13 mx-3"></div>
        <div v-html="state.detail.productFeaturesContent3" class="feature width-40 flex-column py-13 mx-3"></div>
        <div v-html="state.detail.productFeaturesContent4" class="feature width-40 flex-column py-13 mx-3"></div>
        <div v-html="state.detail.productFeaturesContent5" class="feature width-40 flex-column py-13 mx-3"></div>
      </div>
    </div>
    <div class="min-width-130 py-20">
      <div class="width-130 mx-auto">
        <p class="text-orange text-40 font-weight-bold">{{state.detail.scenariosTitle}}<br/>-</p>
      </div>
      <div class="width-130 mx-auto flex_between_start mt-10">
        <div v-html="state.detail.scenariosContent1" class="feature width-33 flex-column py-13 mx-3"></div>
        <div v-html="state.detail.scenariosContent2" class="feature width-33 flex-column py-13 mx-3"></div>
        <div v-html="state.detail.scenariosContent3" class="feature width-33 flex-column py-13 mx-3"></div>
        <div v-html="state.detail.scenariosContent4" class="feature width-33 flex-column py-13 mx-3"></div>
      </div>
    </div>
    <div class="width-130 mx-auto py-40">
      <p class="text-orange text-40 font-weight-bold">{{state.detail.otherSolutionTitle}}</p>
      <!-- <p class="my-8 text-22 text-black-light2">为您提供基于不同场景和行业的专业咨询及落地服务</p> -->
      <div class="d-flex">
        <div class="width-38 mx-2" v-for="(item, index) in recommendList" :key="index">
          <div class="height-18 flex_center">
            <img :src="item.img" alt="pic">
          </div>
          <p class="text-22 text-black-light2 mt-8">{{item.title}}</p>
          <p class="text-14 text-black-light3 mt-4">{{item.content}}</p>
        </div>
      </div>
    </div>
    <contactUs/>
    <CommonFooter/>
  </div>
</template>

<script setup>
import CommonFooter from '@/components/CommonFooter.vue'
import contactUs from '@/components/contactUs.vue'
import { list, sceneList, recommendList } from '@/static/kudatax'
import { onMounted, reactive, watch } from 'vue'
import { ElMessage } from 'element-plus'
import userStore from '@/store/index'
import urls from '@/api/index'

const state = reactive({
  detail: {}
})
watch(() => userStore.state.lang, () => {
  getDetail()
})
const getDetail = () => {
  userStore.commit('CHANGELOAD', true)
  const params = {
    lang: userStore.state.lang,
    id: '62cbe7346887a7e14773ab34'
  }
  urls.home.getBusinessDetail(params)
    .then(res => {
      state.detail = res.data.kuData
      userStore.commit('CHANGELOAD', false)
    })
    .catch(err => {
      userStore.commit('CHANGELOAD', false)
      ElMessage.error(err.msg)
    })
}
onMounted(() => {
  const header = document.getElementById('header')
  header.scrollIntoView()
  getDetail()
})
</script>

<style lang="scss">
.bg_img{
  background: url('@/assets/images/KuDataX.png') no-repeat;
}
.titleDesc{
  font-size: 18px;
  margin: 20px 0;
  p{
    font-size: 20px;
    margin-top: 20px;
  }
}
.special{
  width:100%;
  margin-top: 23px;
  font-size: 14px;
  color: #555;
  overflow:hidden;
  text-overflow:ellipsis;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  word-break:break-all;
}
.special2{
  width:100%;
  height: 209px;
  margin-bottom: 70px;
  font-size: 14px;
  color: #555;
  overflow:hidden;
  text-overflow:ellipsis;
  display:-webkit-box;
  -webkit-line-clamp:11;
  -webkit-box-orient:vertical;
  word-break:break-all;
}
.special3{
  width:100%;
  margin-top: 27px;
  font-size: 14px;
  color: #555;
  overflow:hidden;
  text-overflow:ellipsis;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  word-break:break-all;
}
.feature{
  p{
    margin: 20px 0;
  }
  img{
    display: block;
    margin: auto;
    width: 140px;
    height: auto;
  }
  strong{
    font-size: 22px;
  }
  span{
    display: block;
    width:100%;
    font-size: 14px;
    color: #555;
    overflow:hidden;
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    word-break:break-all;
  }
}
.title{
  font-size: 22px;
  color: #222;
}
:deep(.el-tabs__item){
  margin-bottom: 10px;
  font-size: 24px;
  font-weight: 500;
  color: #222;
}

:deep(.el-tabs__active-bar){
  height: 3px;
}
</style>
